<template>
  <div id="rose-chart">
    <div class="title">高风险食用农产品排行榜</div>
    <dv-scroll-ranking-board :config="config" ref="scrollBoard" style="width:95%;height:300px" />
  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  name: 'RoseChart',
  props: {
    noPassRankList: [],
    checkMonth:''
  },
  data() {
    return {
      dataList: [],
      config: {
        data: [
        ],
        waitTime: 2000,
        carousel: 'single',
        rowNum: 8,
        sort: true,
      }
    }
  },
  watch: {
    noPassRankList() {
      this.showCharts()
    }
  },
  methods: {
    showCharts() {
      const resultList = this.noPassRankList.map(item => {
        return {
          name: item.simpleName,
          value: item.noPassNum
        }
      })
      this.config.data = resultList
      this.config = { ...this.config }
      console.log(resultList, '高风险农产品')
      console.log(this.config.data, '高风险农产品')


    }

  },
}

</script>

<style lang="less">
#rose-chart {
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  box-sizing: border-box;
  padding: 0 0 20px 20px;

  .title {
    font-size: 18px;
    font-weight: bolder;
    margin: 8px 0 0 20px;
  }

  // .dv-scroll-ranking-board .ranking-column .inside-column {
  //   background-color: #3759be !important;
  // }

  // .dv-scroll-ranking-board .ranking-info .rank {
  //   color: #c9d6ff !important;
  // }

}
</style>
